<template>
  <div style="width:100%;height: 3.8rem;">
        <div class="order_class">
            <div>
                <i class="icon njfont nj-dingwei" style="color:#32a70b;"></i>
                <div id="city" class="labels">{{prodarea || '暂无'}}</div>
                <!--产地-->
                <div class="right_line"></div>
            </div>
            <div>
                <i class="icon njfont nj-pinpai1" style="color:#e39703"></i>
                <div class="labels">{{brandname || '暂无'}}</div>
                <div class="right_line"></div>
            </div>
            <div>
                <i class="icon njfont" ref="conditions" :style="{color: iconOptions[storageConditions] ? iconOptions[storageConditions][1] : '#317fe1'}" :class="[iconOptions[storageConditions] ? iconOptions[storageConditions][0] : iconOptions['常温'][0]]"></i>
                <div class="labels"> {{iconOptions[storageConditions] ? storageConditions : "常温"}} </div>
            </div>
        </div>
  </div>
</template>
<script>
export default {
    props: {
        prodarea: {
            type: String
        },
        brandname: {
            type: String
        },
        storageConditions: {
            type: String
        },
    },
    data () {
        return {
            //储存条件
            iconOptions: {
                "常温": ["nj-changwen1", "#317fe1"],
                "冷藏": ["nj-lengcang1", "#317fe1"],
                "热链": ["nj-relian1", "#df4002"],
                "冷冻": ["nj-lengdong1", "#317fe1"]
            },
        }
    },
    mounted(){
      
    },
    methods: {
      
    }
}
</script>
<style scoped>
    .order_class {
        width: 100%;
        background: #ffffff;
        font-size: 0.6rem;
        border: none;
        margin-bottom: 0.75rem;
        text-align: center;
        overflow: hidden;
        margin: 0;
    }
    .order_class > div {
        width: 33.33333333%;
        position: relative;
        float: left;
    }
    .order_class .icon {
        font-size: 1.6rem;
        height: 1.6rem;
        display: block;
        margin-top: 0.7rem;
        color: #a9a9a9;
    }
</style>
